<template>
    <van-popup class="pop_box" 
        v-model="isshow"
        @close="close()"
        overlay-class="popbg"
        :class="layoutstyle"
         v-if="showContent"
        >
        <div class="padB24 borderB" style="display: flex; justify-content: space-between;">
          <slot name="header"></slot>
          <div class="marL24" style="display: flex; justify-content: space-between; flex-direction: column; flex: 1;">
              <slot name="title"></slot>
              <slot name="detail"></slot>
          </div>
        </div>
        <slot name="content">内容</slot>
        <slot name="footer">456</slot>
    </van-popup>
</template>
<script>
import { Popup } from 'vant';
export default {
  components: {
    [Popup.name]: Popup,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    showContent: {
      type: Boolean,
      default: true,
    },
    layoutstyle: {
      type: String,
      default: '',
    },
  },
  computed:{
    isshow:{
      get() {
          return this.show;
      },
      set(value) {
          this.$emit("update:show", value);
      }
    },
  },
  data() {
    return {
      
    };
  },
  methods: {
    close() {
      //this.isshow = false
      //this.$emit('update:show',false)
    },
  },
};
</script>
<style lang="scss">
	// 制作方式
	.proMethodsBox{ z-index: 24; top: 20%; left:0; width: 100%; bottom: 0; border-radius: 0.5rem 0.5rem 0 0; text-align: left; padding: 0.75rem; transform: translate(0,0);box-sizing: border-box;
		.photo{ border-radius: 0.3rem; }
		.classifyList{ height: calc(100% - 5.25rem); overflow-y: scroll; flex: 1; -webkit-flex: 1; box-sizing: border-box; }
		.entryBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
			.entryItem { display: flex; flex-direction: column; justify-content: center; width: 5.25rem; height: 3.75rem; text-align: center; margin: 0 0.75rem 0.75rem 0; border-radius: 0.25rem; background-color: #f0f0f0; box-sizing: border-box; 
				&:nth-of-type(3n) {
					margin-right: 0;
				}
				&.on{ position: relative; border: 0.1rem solid $mainColor; background-color: $mainColor; color: #333;
					//&::after { content: ''; position: absolute; right: 0; top: 0.5rem; display: block; transform: translateY(-50%); width: 40rpx; height: 40rpx; background: url(../../static/images/check_circle.png) no-repeat; background-size: cover; }
				}
				&.disable{ border: 0.1rem dashed #ccc;}
			}
			.entrytext{ border: none; padding: 0.5rem; border-radius: 0.25rem; width: 100%; height: 3.75rem; background-color: #f0f0f0;}
		}
		.addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
			.total{ width: 4rem;}
			.addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
			.operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid #feb229; border-radius: 4px;
				&:last-child{ border: 1px solid #feb229; background-image: linear-gradient(to right,#ffae44,#ff6e40); color: #fff;}
			}
			.much{ width: calc(100% - 2rem - 2px);  height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
		}
		.proMethodsBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; box-shadow: 0 0 0.25rem rgba(0,0,0,0.2);
			.btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
			.cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1rpx solid #333;}
			.surnBtn{ flex: 1; text-align: center; color: #fff; margin-left: 0.375rem; background-image: linear-gradient(to right,#ffae44,#ff6e40);}
		}
	}
</style>